<template>
    <view :class="['my-input-field', { 'my-input-field-disabled' : disabled}]">
        <u--input v-model="localValue" :type="type" :placeholder="placeholder" :disabled="disabled" :readonly="readonly"
            :clearable="clearable" :maxlength="maxlength" :fontSize="fontSize" @input="input" @change="change"
            border="none" />
        <view class="suffix">
            <slot name="suffix"></slot>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'InputField',
        props: {
            value: String,
            placeholder: {
                type: String,
                default: '请输入'
            },
            disabled: {
                type: Boolean,
                default: false
            },
            readonly: {
                type: Boolean,
                default: false
            },
            clearable: {
                type: Boolean,
                default: false
            },
            maxlength: {
                type: Number,
                default: -1
            },
            fontSize: {
                type: String,
                default: '2rem'
            },
            customStyle: {
                type: String,
                default: ''
            },
            type: {
                type: String,
                default: 'text' //text | number | password 
            }
        },
        watch: {
            value(val) {
                this.localValue = val;
            }
        },
        data() {
            return {
                localValue: '',
            }
        },
        methods: {
            input(value) {
                this.$emit('input', value);
            },
            change(value) {
                this.$emit('change', value);
            },
        },
        mounted() {
            this.localValue = this.value;
        }
    };
</script>

<style lang="scss" scoped>
    .my-input-field {
        height: 8rem;
        width: 100%;
        position: relative;
        border: 1px solid #ccc;
        border-radius: 1rem;
        display: flex;
        align-items: center;

        .u-input {
            height: 100%;
            padding: 0 2rem !important;
        }

        .suffix {
            padding: 0 2rem;
        }

        &-disabled {
            background-color: #f5f7fa;
        }
    }
</style>